<template>
    <div>
        <Row style="margin:5px 0px 5px 5px">
            <i-col span="2" >
                <Button  size="default"  type="primary" @click="btn_refresh">刷新</Button>
            </i-col>
            <i-col  span="3" >
                <Button  size="default"   type="primary" @click="btn_add" >添加节点</Button>
            </i-col>
        </Row>
        <i-table size="default"   border stripe  :columns="format" :data="show_list" :height="sharedState.tableHeight" >
            <template slot-scope="{ row, index }" slot="action">
                <Button  size="default"  type="primary" style="margin-bottom: 5px "  @click="connect(index)">连接测试</Button>
            </template>
        </i-table >
        <div style="text-align: center;margin-top: 10px;">
            <Page ref="page" :total="total" :page-size="pageSize"  @on-change="changePage" @on-page-size-change="changePageSize"  show-total show-sizer/>
        </div>

        <Modal v-model="show_add_node_modal" width="800" draggable  >
            <p slot="header" style="color:#f60;text-align:center">
                <span>添加节点</span>
            </p>
            <div >
                <Form ref="node" :model="node" label-position="left"  :label-width="100" inline>
                    <Form-Item label="地址"  prop="host">
                        <Input type="text"  v-model="node.host" />
                    </Form-Item> 
                    <Form-Item label="端口:"  prop="port">
                        <InputNumber  v-model="node.port" />
                    </Form-Item> 
                    <Form-Item label="别名:"  prop="alias">
                        <Input type="text"   v-model="node.alias"  />
                    </Form-Item> 
                </Form> 
            </div>
            <div slot="footer">
                <Button  size="default"  type="primary"   @click="submit_add_node('node')">提交</Button>
            </div>
        </Modal>
    </div>
</template>
<script>

import { task_node_list,add_task_node,test_node_connect } from  '@/api'
import { post } from '@/api/http'
import axios from 'axios';
import store from '@/store'

export default {
    data() {
        return {
            sharedState: store.state,
            format: [
                {
                    title: '序号',key: 'id'
                },
                {
                    title: '别名',key: 'alias',
                },
                {
                    title: '地址',key: 'host'
                },
                {
                    title: '端口',key: 'port',
                },
                {
                    title: '操作',slot: 'action',width: 300,align: 'center'
                }
            ],
            //add
            show_add_node_modal:false,
            node : {
                host: '',
                port: 0,
                alias: '',
            },
            // 分页
            show_list: [],
            total: 0,
            pageSize: 10,
        }
    },
    methods: {
		btn_refresh(){
            this.refresh()
        },

        btn_add(){
            this.show_add_node_modal = true
        },
        changePage(page) {
            this.page=page
            this.refresh()
        },
        // 每页条数变更
        changePageSize(pageSize){
            this.pageSize = pageSize
            this.refresh()
        },
        connect(index){
            let data = this.show_list[index]
            // post(test_node_connect,data).then( (response) => {
            axios({url:test_node_connect, data:data,method:'post'}).then(response =>{
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('连接成功')
                }else{
                    this.$Message.error('连接失败')
                }
            })
        },
        submit_add_node(){
            let data = this.node
            post(add_task_node,data).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('添加成功')
                    this.show_add_node_modal = false
                    this.refresh()
                }else {
                    alert("添加失败:",info)
                }
            })
        },
        refresh() {
            let data = {
                "pageSize":this.pageSize,
                "page":this.page,
            }
            post(task_node_list,data).then(response =>{
                let data = response.data
                this.total  = data.total
                this.show_list = data.data
            })
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style>
    pre{
        white-space: pre-wrap!important;
        word-wrap: break-word!important;
        *white-space:normal!important;
    }
</style>